Scrubbable numbers
Try clicking and dragging the numbers in the text below:
👀 Reading hidden code
👀 Reading hidden code
👀 Reading hidden code
# using PlutoUI
If Alice has
👀 Reading hidden code
md"""
_If Alice has $(@bind a Scrubbable(20)) apples,
and she gives $(@bind b Scrubbable(3)) apples to Bob..._
"""
...then Alice has 17 apples left.
👀 Reading hidden code
md"""
_...then Alice has **$(a - b)** apples left._
"""
👀 Reading hidden code
Examples
We define a variable x as a scrubbable number like so:
👀 Reading hidden code
@bind x Scrubbable(5)
👀 Reading hidden code
10051000 + x
👀 Reading hidden code
Using interpolation (with $), you can write this definition inside Markdown text:
👀 Reading hidden code
If Alice has
md"""
If Alice has $(@bind num_apples Scrubbable(20)) apples...
"""
👀 Reading hidden code
20num_apples
👀 Reading hidden code
Arguments
Besides an initial value, a scrubbable number also has an array of possible values that can be reached.
When you pass a single number to Scrubbable, this array is automatically created. Have a look at the minimum and maximum allowed values of the following scrubbables:
👀 Reading hidden code
5
2000
30.0
(Scrubbable(5), Scrubbable(2000), Scrubbable(30.0))
👀 Reading hidden code
(Here we created a Scrubbable on its own, without binding its value to a variable. Not very useful!)
You can also specify the array manually:
👀 Reading hidden code
220
Scrubbable(200 : 300; default=220)
👀 Reading hidden code
If no default is specified, the middle value is used.
👀 Reading hidden code
Formatting
The library d3-format is used to format floating-point numbers. You can specify a format string like ".2f" to be used to format the scrubbable value. Have a look at their documentation to see more examples.
👀 Reading hidden code
I spent € 30M on Pluto.jl stickers
And it was worth it!
👀 Reading hidden code
👀 Reading hidden code
👀 Reading hidden code
👀 Reading hidden code
Appendix
What is a good default range?
👀 Reading hidden code
default_range (generic function with 1 method)function default_range(x::Integer)
if x == 0
-10:10
elseif 0 < x <= 10
0:10
elseif -10 <= x < 0
-10:0
else
sort(round.([Int64], (0.0:0.1:2.0) .* x))
end
end
👀 Reading hidden code
0.1
0.125893
0.158489
0.199526
0.251189
0.316228
0.398107
0.501187
0.630957
0.794328
1.0
1.25893
1.58489
1.99526
2.51189
3.16228
3.98107
5.01187
6.30957
7.94328
10.0
up_or_down_one_order_of_magnitude = 10 .^ (-1.0:0.1:1.0)
👀 Reading hidden code
default_range (generic function with 2 methods)function default_range(x::Real) # not an integer
if x == 0
-1.0 : 0.1 : 1.0
elseif 0 < x < 1
0 : 0.1 : 1
else
sort(x .* up_or_down_one_order_of_magnitude)
end
end
👀 Reading hidden code
Integer inputs become integer ranges with constant step:
👀 Reading hidden code
0
2
4
6
8
10
12
14
16
18
20
22
24
26
28
30
32
34
36
38
40
default_range(20)
👀 Reading hidden code
0
200
400
600
800
1000
1200
1400
1600
1800
2000
2200
2400
2600
2800
3000
3200
3400
3600
3800
4000
default_range(2000)
👀 Reading hidden code
Floating points get a logarithmic scale across one order of magnitude:
👀 Reading hidden code
100000.0
1.25893e5
1.58489e5
1.99526e5
2.51189e5
3.16228e5
3.98107e5
5.01187e5
6.30957e5
7.94328e5
1.0e6
1.25893e6
1.58489e6
1.99526e6
2.51189e6
3.16228e6
3.98107e6
5.01187e6
6.30957e6
7.94328e6
1.0e7
default_range(1.0e6)
👀 Reading hidden code
-20.0
-15.8866
-12.6191
-10.0237
-7.96214
-6.32456
-5.02377
-3.99052
-3.16979
-2.51785
-2.0
-1.58866
-1.26191
-1.00237
-0.796214
-0.632456
-0.502377
-0.399052
-0.316979
-0.251785
-0.2
default_range(-2.0)
👀 Reading hidden code
Zero becomes a range around zero:
👀 Reading hidden code
-10:10default_range(0)
👀 Reading hidden code
-1.0:0.1:1.0default_range(0.0)
👀 Reading hidden code
Definition
👀 Reading hidden code
Scrubbablebegin
"""
An inline number that can be changed by clicking and dragging the mouse.
# Examples
```julia
md\"\"\"
_If Alice has \$(@bind a Scrubbable(20)) apples,
and she gives \$(@bind b Scrubbable(3)) apples to Bob..._
\"\"\"
```
```julia
md\"\"\"
_...then Alice has **\$(a - b)** apples left._
\"\"\"
```
In the examples above, we give the **initial value** as parameter, and the reader can change it to be lower or higher.
## Custom range
Besides an initial value, a scrubbable number also has an array of possible values that can be reached. When you pass a **single number** to `Scrubbable`, this array is automatically created.
You can also **specify the array manually**:
```julia
@bind apples Scrubbable(200 : 300; default=220)
```
## Formatting
The library [`d3-format`](https://github.com/d3/d3-format) is used to format floating-point numbers. You can specify a **format string** like `".2f"` to be used to format the scrubbable value. Have a look at their [documentation](https://github.com/d3/d3-format) to see more examples.
`@bind money Scrubbable(30e6, format=".0s", prefix="€ ")`
`@bind coolness Scrubbable(0.80 : 0.01 : 1.00, format=".0%", prefix="you are 🌝 ", suffix=" cool")`
"""
Base.@kwdef struct Scrubbable
values::AbstractVector{<:Real}
default::Real
format::Union{AbstractString,Nothing}=nothing
prefix::AbstractString=""
suffix::AbstractString=""
end
Scrubbable(range::AbstractVector; kwargs...) = Scrubbable(;values=range, default=range[1 + length(range) ÷ 2], kwargs...)
Scrubbable(x::Number; kwargs...) = Scrubbable(;values=default_range(x), default=x, kwargs...)
Base.get(s::Scrubbable) = s.default
function Base.show(io::IO, m::MIME"text/html", s::Scrubbable)
format = if s.format === nothing
# TODO: auto format
if eltype(s.values) <: Integer
""
else
".1f"
end
else
String(s.format)
end
write(io, """<script>
const d3format = await import("https://cdn.jsdelivr.net/npm/d3-format@2/+esm")
const argmin = xs => xs.indexOf(Math.min(...xs))
const closest_index = (xs, y) => argmin(xs.map(x => Math.abs(x-y)))
const values = $(string(collect(s.values)))
const el = html`
<span title="Click and drag this number left or right!" style="cursor: col-resize;
touch-action: none;
background: rgb(252, 209, 204);
padding: 0em .2em;
border-radius: .3em;
font-weight: bold;">$(s.default)</span>
`
let old_x = 0
let old_index = 0
let current_index = closest_index(values, $(s.default))
const formatter = s => $(repr(s.prefix)) + d3format.format($(repr(format)))(s) + $(repr(s.suffix))
Object.defineProperty(el, 'value', {
get: () => values[current_index],
set: x => {
current_index = closest_index(values, x)
el.innerText = formatter(el.value)
},
});
// initial value
el.innerText = formatter($(s.default))
const onScrub = (e) => {
const offset = e.clientX - old_x
const new_index = Math.min(values.length-1, Math.max(0,
Math.round(offset/10) + old_index
))
if(new_index !== current_index) {
current_index = new_index
el.innerText = formatter(el.value)
el.dispatchEvent(new CustomEvent("input"))
}
}
const onpointerdown = (e) => {
old_x = e.clientX
old_index = current_index
window.addEventListener("pointermove", onScrub)
}
el.addEventListener("pointerdown", onpointerdown)
const onpointerup = () => {
window.removeEventListener("pointermove", onScrub)
}
window.addEventListener("pointerup", onpointerup)
el.onselectstart = () => false
invalidation.then(() => {
el.removeEventListener("pointerdown", onpointerdown)
window.removeEventListener("pointerup", onpointerup)
})
return el
</script>""")
end
Scrubbable
end
👀 Reading hidden code
export Scrubbable
👀 Reading hidden code